Represent data hierarchy in sections#

This example demonstrates how to use the Section component in the Scripting app to visually organize hierarchical data within a List. The content is structured by grouping related items—such as staff members by department—into labeled sections for better readability and navigation.

Overview#

You will learn how to:

• Display structured data using List and Section
• Group related items under section headers
• Create reusable row components for clarity
• Bind hierarchical data (Company → Departments → Staff) into a readable layout

Data Model#

The example defines a three-level hierarchy representing a company structure:

1type Person = {
2  name: string
3  phoneNumber: string
4}
5
6type Department = {
7  name: string
8  staff: Person[]
9}
10
11type Company = {
12  name: string
13  departments: Department[]
14}

Sample Data#

1const companyA: Company = {
2  name: "Company A",
3  departments: [
4    {
5      name: "Sales",
6      staff: [
7        { name: "Juan Chavez", phoneNumber: "(408) 555-4301" },
8        { name: "Mei Chen", phoneNumber: "(919) 555-2481" }
9      ]
10    },
11    {
12      name: "Engineering",
13      staff: [
14        { name: "Bill James", phoneNumber: "(408) 555-4450" },
15        { name: "Anne Johnson", phoneNumber: "(417) 555-9311" }
16      ]
17    }
18  ]
19}

Person Row Component#

PersonRowView is a reusable component that displays a person's name and phone number with appropriate formatting.

1function PersonRowView({ person }: { person: Person }) {
2  return <VStack alignment={"leading"} spacing={3}>
3    <Text font={"headline"} foregroundStyle={"label"}>{person.name}</Text>
4    <HStack spacing={3} font={"subheadline"} foregroundStyle={"secondaryLabel"}>
5      <Label title={person.phoneNumber} systemImage={"phone"} />
6    </HStack>
7  </VStack>
8}

Main View Layout#

The main view uses a NavigationStack containing a List where each department is represented as a separate Section. The section header displays the department name, and each person is rendered using the PersonRowView.

1function Example() {
2  return <NavigationStack>
3    <List
4      navigationTitle={"Represent data hierarchy in sections"}
5      navigationBarTitleDisplayMode={"inline"}
6    >
7      {companyA.departments.map(department =>
8        <Section
9          header={<Text>{department.name}</Text>}
10        >
11          {department.staff.map(person =>
12            <PersonRowView person={person} />
13          )}
14        </Section>
15      )}
16    </List>
17  </NavigationStack>
18}

Entry Point#

The script presents the view and exits upon dismissal:

1async function run() {
2  await Navigation.present({
3    element: <Example />
4  })
5
6  Script.exit()
7}
8
9run()

Key Components#

• List: Provides a scrollable container for content.
• Section: Groups related items under a common header.
• NavigationStack: Enables title display and navigation context.
• Reusable View: PersonRowView ensures clean, consistent row formatting.

Use Cases#

• Grouping contacts by department or team
• Displaying categorized lists (e.g., tasks, inventory, regions)
• Organizing any data set that has a parent-child structure

Using Section within List improves both visual structure and user comprehension when working with hierarchical data.